<template>
	<div class="order_data table-theme">
		<head-title title="数据--平台商品统计"></head-title>
		<el-row :gutter="20">
			<el-col :span="24">
				<div class="Order-column">
					<div class="chart-view-title">销售商品总数</div>
					<div class="chart-menu">
						<div class="chart-menu-left">
							<div class="tips">请选择</div>
							<div class="date-select">
								<el-select v-model="dateVal.year" placeholder="年份" @change="chartdateSelect(0)">
									<el-option v-for="item in orderOptions.yearOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
								</el-select>
							</div>
							<div class="date-select">
								<el-select v-model="dateVal.month" placeholder="月份" @change="chartdateSelect(1)">
									<el-option v-for="item in orderOptions.monthOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
								</el-select>
							</div>
						</div>
						<div class="chart-menu-right">
							<div class="right-time-select">
								<span @click="timeSelect(0)" :class="[timeType1 == 0 ? 'active' : '']">年</span>
								<span @click="timeSelect(1)" :class="[timeType1 == 1 ? 'active' : '']">月</span>
							</div>
						</div>
					</div>
					<BarChart :chart-data="orderData1" :height="350 + 'px'"></BarChart>
				</div>
			</el-col>
		</el-row>

		<div class="order-list-data">
			<div class="order-list-data-view">
				<div class="order-top-menu">
					<div class="order-menu-left">
						<div class="date-select-view">
							<el-select v-model="OrderListSelectVal.year" placeholder="年份" @change="OrderListSelect">
								<el-option v-for="item in orderOptions.yearOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
							</el-select>
						</div>

						<div class="date-select-view">
							<el-select v-model="OrderListSelectVal.month" placeholder="月份" @change="OrderListSelect">
								<el-option v-for="item in orderOptions.monthOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
							</el-select>
						</div>
					</div>

					<div class="order-menu-right">
						<div class="refresh-btn"><el-button type="primary" @click="refreshPage">刷新</el-button></div>
						<search-view :option="searchOption" @value="goSearch" @clear="refreshPage"></search-view>
					</div>
				</div>
				<p style="text-align: right;line-height: 30px;">总数据数：{{total}}</p>
				<el-table :data="OrderListDataList" stripe>
					<el-table-column label="序号" align="center" prop="store.store_id"></el-table-column>
					<el-table-column label="型号" align="center" prop="money"></el-table-column>
					<el-table-column label="名称" align="center" prop="store.store_name"></el-table-column>
					<el-table-column label="主图" align="center" width="80">
						<template slot-scope="scope">
							<el-image :src="scope.row.store.store_logo" style="width: 50px; height: 50px; vertical-align: top;"></el-image>
						</template>
					</el-table-column>
					<el-table-column label="空间" align="center" prop="money"></el-table-column>
					<el-table-column label="风格" align="center" prop="service_name"></el-table-column>
					<el-table-column label="品类" align="center" prop="all"></el-table-column>
					<el-table-column label="类型" align="center" prop="successd"></el-table-column>
					<el-table-column label="销售数量" align="center" prop="rate"></el-table-column>
				</el-table>
				<div class="pages">
					<el-pagination background layout="prev, pager, next, jumper" :total="total" @current-change="getStoreData" :current-page="page"></el-pagination>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import BarChart from './components/BarChart';
import percentageChart from './components/percentageChart';
export default {
	components: {
		BarChart,
		percentageChart
	},
	data() {
		return {
			date: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
			orderData1: {
				tips: '销售数',
				color: '#a6c7fb',
				date: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
				data: ['450', '230', '650', '450', '540', '450', '560', '540', '670', '430', '670', '430']
			},
			orderOptions: {
				yearOptions: [
					{
						value: '2018',
						label: '2018'
					},
					{
						value: '2019',
						label: '2019'
					},
					{
						value: '2020',
						label: '2020'
					}
				],
				monthOptions: [
					{
						value: '01',
						label: '01'
					},
					{
						value: '02',
						label: '02'
					},
					{
						value: '03',
						label: '03'
					},
					{
						value: '04',
						label: '04'
					},
					{
						value: '05',
						label: '05'
					},
					{
						value: '06',
						label: '06'
					},
					{
						value: '07',
						label: '07'
					},
					{
						value: '08',
						label: '08'
					},
					{
						value: '09',
						label: '09'
					},
					{
						value: '10',
						label: '10'
					},
					{
						value: '11',
						label: '11'
					},
					{
						value: '12',
						label: '12'
					}
				]
			},
			timeType1: 0,
			dateVal: {
				year: 2020,
				month: this.getCurrentMonth(new Date().getMonth() + 1)
			},
			dateVal2: {
				year: 2020,
				month: this.getCurrentMonth(new Date().getMonth() + 1)
			},
			dateVal3: {
				year: 2020,
				month: this.getCurrentMonth(new Date().getMonth() + 1)
			},
			OrderListDataList: [],
			OrderListSelectVal: {
				year: '',
				month: ''
			},
			page: 0,
			total: 0,
			totalData: 0, 
			searchOption:[{
				value:0,
				label:'商户ID'
			}],
			selectContent:'',
			classSelect:0
		};
	},
	methods: {
		init(type, day, time) {
			let data = {
				type: type,
				day: day,
				time: time,
				store_id: localStorage.getItem('store_id')
			};
			this.$http(this.$ApiList.OrderData, data).then(res => {
				if (res.code == 200) {
					if (time.toString().indexOf('-') != -1) {
						this.orderData1.date = [];
					} else {
						this.orderData1.date = this.date;
					}
					this.orderData1.data = [];
					res.datas.succeed.forEach(item => {
						if (time.toString().indexOf('-') != -1) {
							this.orderData1.date.push(item.add_time);
						}
						this.orderData1.data.push(item.counts);
					});
				}
			});
		},
		timeSelect(index) {
			this.timeType1 = index;
			if (index == 0) {
				this.init(2, 2, this.dateVal.year);
			} else {
				this.init(2, 3, this.dateVal.year + '-' + this.dateVal.month);
			}
		},
		chartdateSelect(type) {
			if (type == 0) {
				this.init(2, 2, this.dateVal.year);
			} else {
				this.timeType1 = 1;
				this.init(2, 3, this.dateVal.year + '-' + this.dateVal.month);
			}
		},
		getCurrentMonth(month) {
			if (month < 10) {
				month = 0 + '' + month;
			}
			return month;
		},
		// 订单列表数据分析
		getStoreData(e) {
			let data = {
				page: e - 1 ? e - 1 : 0,
				limit: 10,
				goods_store_id: localStorage.getItem('store_id')
			};
			if (this.OrderListSelectVal.year == '') {
				data.day = 1;
			} else if (this.OrderListSelectVal.month == '') {
				data.day = 2;
				data.time = this.OrderListSelectVal.year;
			} else {
				data.day = 3;
				data.time = this.OrderListSelectVal.year + '-' + this.OrderListSelectVal.month;
			}

			if (this.selectContent != '' && this.classSelect == 1) {
				data.store_id = this.selectContent;
			}
			this.$http(this.$ApiList.OrderListData, data).then(res => {
				this.OrderListDataList = res.datas.list;
				this.total = res.datas.count;
			});
		},
		// 筛选订单列表数据
		OrderListSelect() {
			this.getStoreData();
		},
		// 刷新订单列表数据
		refreshPage() {
			this.OrderListSelectVal.year = '';
			this.OrderListSelectVal.month = '';
			this.selectContent = '';
			this.classSelect = 0;
			this.getStoreData();
		},
		// 搜索订单列表数据
		goSearch(classSelect, selectContent) {
			this.classSelect = classSelect;
			this.selectContent = selectContent;
			this.getStoreData();
		},
		getYear() {
			this.orderOptions.yearOptions = [];
			let yearNum = new Date().getFullYear();
			for (let i = 2018; i < yearNum; i++) {
				let year = {
					value: i,
					label: i
				};
				this.orderOptions.yearOptions.push(year);
			}
		}
	},
	created() {
		this.getYear();
		this.init(1, 2, 2020);
		this.getStoreData();
	}
};
</script>
<style>
.Order-column,
.Order-statistics {
	background-color: #ffffff;
	box-shadow: 0px 6px 10px 0px rgba(0, 0, 0, 0.14);
	border-radius: 4px;
}
.Order-column .chart-view-title {
	margin: 0 28px;
	line-height: 44px;
	font-size: 16px;
	font-weight: bold;
	border-bottom: 1px solid #dedede;
	color: #333;
}
.Order-column .chart-menu {
	margin-top: 30px;
	padding: 0 28px 0 40px;
	display: flex;
}
.Order-column .chart-menu .chart-menu-left {
	display: flex;
	flex: 1;
}
.Order-column .chart-menu .tips {
	margin-right: 12px;
	line-height: 30px;
}
.date-select {
	margin-right: 10px;
	width: 80px;
}
.Order-column .chart-menu .chart-menu-left .el-input__inner,
.chart-menu-left .el-select__caret,
.el-select-dropdown__item {
	height: 30px;
	line-height: 30px;
}
/* 年日月选择 */
.Order-column .chart-menu .chart-menu-right {
	display: flex;
	flex: 1;
	flex-direction: row-reverse;
	align-items: center;
}
.Order-column .chart-menu .chart-menu-right .right-time-select {
	display: flex;
	height: 24px;
}
.Order-column .chart-menu .chart-menu-right span {
	display: block;
	width: 34px;
	height: 24px;
	line-height: 24px;
	text-align: center;
	background: #f2f2f2;
	cursor: pointer;
}
.Order-column .chart-menu .chart-menu-right .active {
	color: #ffffff;
	background: #999999;
}
.Order-column .chart-menu .chart-menu-right span:nth-child(1) {
	border-radius: 4px 0 0 4px;
}
.Order-column .chart-menu .chart-menu-right span:nth-child(2) {
	border-radius: 0 4px 4px 0;
}
/* 日周月年订单 */
.Order-statistics .data-menu {
	margin: 0 36px;
	line-height: 45px;
	font-size: 16px;
	font-weight: bold;
	border-bottom: 1px solid #dedede;
	color: #333;
}
.Order-statistics .data-menu span {
	display: inline-block;
	width: 50px;
	line-height: 28px;
	text-align: center;
	cursor: pointer;
}
.Order-statistics .data-menu .active {
	border-bottom: 4px solid #2073f5;
}
.Order-statistics .data-panel {
	padding: 18px 66px 20px 66px;
	text-align: center;
}
.Order-statistics .data-panel .data-panel-item {
	padding: 20px 0 33px 0;
	border-right: 1px solid #dedede;
	border-bottom: 1px solid #dedede;
}

.Order-statistics .data-panel .data-panel-item p:first-child {
	margin-bottom: 56px;
	line-height: 15px;
	color: #666666;
}
.Order-statistics .data-panel .data-panel-item p:last-child {
	font-size: 24px;
	font-weight: bold;
	color: #333333;
}
/* 订单数据列表 */
.order-list-data {
	margin-top: 20px;
}
.order-list-data-view {
	padding: 20px 20px;
	background-color: #fff;
	border-radius: 4px;
	box-shadow: 0px 6px 10px 0px rgba(0, 0, 0, 0.14);
}
.order_data .order-top-menu {
	display: flex;
}
.order_data .refresh-btn {
	margin-left: 10px;
}
.order-menu-left {
	flex: 1;
	display: flex;
}
.order-menu-right {
	flex: 2;
	display: flex;
	flex-direction: row-reverse;
}

.date-select-view {
	margin-right: 10px;
	width: 120px;
}

.order-top-menu .input-with-select .el-input-group__prepend {
	width: 110px;
	background-color: #fff;
}
.order-top-menu .input-with-select .el-input__inner:nth-child(2) {
	width: 150px;
	padding-right: 15px;
}
</style>
